<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      .container{
          width: 100%;
          height: 1000px;
          margin: 0 auto;
          position: relative;
      }
      .box{
          width: 100px;
          height: 100px;
          background-color: #92022c;
          border-radius: 50%;
          position: absolute;
          animation: move 5s linear infinite alternate;
      }

      
      @keyframes move {
          0%{
              left: 100px;
              background-color: #cecece;
          }

          100%{
              left: 500px;
              background-color: #92022c;
          }
      }

    </style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

<!--
7.关键帧动画

    a) 关键帧设置
        @keyframes动画名{
            0%:{样式表)
            25%:{样式表)
            60%:{样式表}
            100%:{样式表}
        }
        注意:这里的百分比一般是升序值，可以是0%-100%之间的做任意值，也可以是倒序。
     b)实施动画
        1)常规用法
            animation-name 来自于@keyframes定义的动画名
            animation-duration 持续时间
            animation-timing-function ：动画函数
                i)linear:匀速
                ii)ease:变速(先慢后快，最后再慢)
                iii)ease-in:变速(由慢到快)
                iv)ease-out:变速(由快到慢)
                v)ease-in-out:变速(慢速开始，慢速结束)
                vi)cubic-bezier(n,n,n,n):自行设定变速，n的值在0-1中间
            animation-delay 延时时间
            animation-iteration-count 动画循环的次数，可以是数字或infinite(一直循环) 默认1次
            animation-direction  动画播放完成后是否反向播放
                i)normal: 不反向 默认
                ii)alternate: 反向
            animation-play-state：动画播放或停止播放
                i)paused:停止播放
                ii)running: 播放（默认）
        2)简洁用法
            animation:name duration timing-function delay iteration-count direction:

-->

</body>
</html>